<template>
  <div class="system">
    <div class="dsystem-left system-list">
      <p class="line">
        <span class="title color1">可见系统</span>
        <el-input
          v-model="checksVisibleInput"
          placeholder="请输入系统名称"
          class="search"
          clearable
        ></el-input>
      </p>
      <el-card class="box-card">
        <el-checkbox-group v-model="checksVisible">
          <Checkbox :systemList="systemVisibleList" />
        </el-checkbox-group>
      </el-card>
    </div>
    <div class="transfer">
      <div class="btn">
        <div style="margin-bottom: 10px">
          <el-button
            type="primary"
            size="default"
            :disabled="!checksInvisible.length || disabled"
            :icon="ArrowLeft"
            @click="handleCheckedChange(1)"
          ></el-button>
        </div>
        <div>
          <el-button
            type="primary"
            size="default"
            :disabled="!checksVisible.length || disabled"
            :icon="ArrowRight"
            @click="handleCheckedChange(2)"
          ></el-button>
        </div>
      </div>
    </div>
    <div class="system-right system-list">
      <p class="line">
        <span class="title color2">不可见系统</span>
        <el-input
          v-model="checksInvisibleInput"
          placeholder="请输入系统名称"
          class="search"
          clearable
        ></el-input>
      </p>
      <el-card class="box-card">
        <el-checkbox-group v-model="checksInvisible">
          <Checkbox :systemList="systemInvisibleList" />
        </el-checkbox-group>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import Checkbox from './checkbox.vue';
import { computed, watch, ref } from 'vue';
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue';
import { modifyAppByTypeAndId } from '@/api/permissionSetting';
import { ElMessage } from 'element-plus';
const props = defineProps([
  'systemVisibleData',
  'systemInvisibleData',
  'department_id',
  'loading'
]);
const emit = defineEmits(['update:loading', 'updateData']);
const checksVisible = ref([]); //选中可见的
const checksInvisible = ref([]); //选中不可见的
const checksVisibleInput = ref(''); //可见搜索
const checksInvisibleInput = ref(''); //不可见搜索
const systemVisibleList = ref([]); //可见列表
const systemInvisibleList = ref([]); //不可见列表
const visible_ids = ref([]); //可见列表ids
const disabled = ref(false);

const loading = computed({
  get: () => props.loading,
  set: value => emit('update:loading', value)
});
const systemVisibleData = computed({
  get: () => props.systemVisibleData
});
const systemInvisibleData = computed({
  get: () => props.systemInvisibleData
});
const department_id = computed({
  get: () => props.department_id
});
// 获取可见系统列表并深拷贝
watch(systemVisibleData, (newValue, oldValue) => {
  checksVisible.value = [];
  visible_ids.value = newValue.map(e => {
    return e.id.toString();
  });
  systemVisibleList.value = JSON.parse(JSON.stringify(newValue));
});
// 获取不可见系统列表并深拷贝
watch(systemInvisibleData, (newValue, oldValue) => {
  checksInvisible.value = [];
  systemInvisibleList.value = JSON.parse(JSON.stringify(newValue));
});
// 可见系统模糊搜索
watch(checksVisibleInput, (newValue, oldValue) => {
  systemVisibleList.value = systemVisibleData.value.filter(item => {
    return getToLowerCase(item.app_name).indexOf(getToLowerCase(newValue)) > -1;
  });
});
// 不可见系统模糊搜索
watch(checksInvisibleInput, (newValue, oldValue) => {
  systemInvisibleList.value = systemInvisibleData.value.filter(item => {
    return getToLowerCase(item.app_name).indexOf(getToLowerCase(newValue)) > -1;
  });
});
// 字符转小写
function getToLowerCase(val) {
  if (val) return val.toLowerCase();
  else return '';
}
// 设置可见系统
const handleCheckedChange = val => {
  let ids = [];
  if (val === 1) {
    //添加
    ids = checksInvisible.value.map(e => {
      return e.toString();
    });
    ids = ids.concat(visible_ids.value);
  } else if (val === 2) {
    //删除
    const checks = checksVisible.value.map(e => {
      return e.toString();
    });
    ids = visible_ids.value.filter(e => {
      return checks.indexOf(e) === -1;
    });
  }
  const params = {
    type: 'department',
    id: department_id.value,
    visible_ids: ids
  };
  disabled.value = true;
  loading.value = true;
  modifyAppByTypeAndId(params)
    .then(res => {
      emit('updateData');
      ElMessage.success('设置成功！');
    })
    .finally(() => {
      disabled.value = false;
    });
};
</script>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  color: #fff;
  background: linear-gradient(90deg, #4ca6a6, #7fbfbf);
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #4ca6a6, #7fbfbf);
  color: #fff;
  right: 0;
}
</style>
<style lang="scss" scoped>
.system {
  padding: 0 18px 18px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  color: #606266;
  .color1 {
    color: #008080;
    border-left: 2px solid #008080;
  }
  .color2 {
    color: #f56c6c;
    border-left: 2px solid #f56c6c;
  }
  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-weight: bold;
      padding-left: 6px;
    }
    .search {
      width: 300px;
    }
  }
  .system-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    .box-card {
      flex: 1;
      overflow: auto;
    }
  }
  .dsystem-left {
    height: 100%;
  }
  .system-right {
    height: 100%;
  }
  .transfer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0 18px;
  }
}
</style>
